<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签综合示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        body {
            font-family: 'Inter', sans-serif;
        }
        h1, h2, h3, h4, h5, h6 {
            color: #333;
        }
        p {
            color: #666;
        }
        table {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        form input, form textarea {
            transition: border-color 0.3s ease;
        }
        form input:focus, form textarea:focus {
            border-color: #3b82f6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
        }
    </style>
</head>
<body class="bg-gray-100 p-8">
    <!-- 标题标签 -->
    <h1 class="text-4xl font-bold mb-4 text-center">这是一级标题</h1>
    <h2 class="text-3xl font-bold mb-3 text-center">这是二级标题</h2>
    <h3 class="text-2xl font-bold mb-2 text-center">这是三级标题</h3>
    <h4 class="text-xl font-bold mb-1 text-center">这是四级标题</h4>
    <h5 class="text-lg font-bold text-center">这是五级标题</h5>
    <h6 class="text-base font-bold text-center">这是六级标题</h6>

    <!-- 段落标签 -->
    <p class="mb-4 text-center">这是一个段落。HTML（超文本标记语言）是用于创建网页的标准标记语言。</p>

    <!-- 列表标签 -->
    <h2 class="text-3xl font-bold mb-3">列表示例</h2>
    <ul class="list-disc pl-6 mb-4">
        <li>无序列表项1</li>
        <li>无序列表项2</li>
    </ul>
    <ol class="list-decimal pl-6 mb-4">
        <li>有序列表项1</li>
        <li>有序列表项2</li>
    </ol>
    <dl class="mb-4">
        <dt class="font-bold">定义列表标题1</dt>
        <dd>定义列表描述1</dd>
        <dt class="font-bold">定义列表标题2</dt>
        <dd>定义列表描述2</dd>
    </dl>

    <!-- 链接标签 -->
    <h2 class="text-3xl font-bold mb-3">链接示例</h2>
    <a href="https://www.example.com" class="text-blue-500 hover:underline" target="_blank">访问示例网站</a>

    <!-- 图片标签 -->
    <h2 class="text-3xl font-bold mb-3">图片示例</h2>
    <img src="https://picsum.photos/200/300" alt="示例图片" class="mb-4 mx-auto block rounded-md shadow-md">

    <!-- 表格标签 -->
    <h2 class="text-3xl font-bold mb-3">表格示例</h2>
    <table class="table-auto border-collapse border border-gray-400 mb-4 mx-auto w-full md:w-1/2">
        <thead>
            <tr>
                <th class="border border-gray-400 p-2 bg-gray-200">表头1</th>
                <th class="border border-gray-400 p-2 bg-gray-200">表头2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="border border-gray-400 p-2">单元格1</td>
                <td class="border border-gray-400 p-2">单元格2</td>
            </tr>
            <tr>
                <td class="border border-gray-400 p-2">单元格3</td>
                <td class="border border-gray-400 p-2">单元格4</td>
            </tr>
        </tbody>
    </table>

    <!-- 表单标签 -->
    <h2 class="text-3xl font-bold mb-3">表单示例</h2>
    <form action="#" method="post" class="mb-4 mx-auto w-full md:w-1/2">
        <label for="username" class="block mb-1">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" class="border border-gray-400 p-2 mb-2 w-full rounded-md">
        <label for="password" class="block mb-1">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" class="border border-gray-400 p-2 mb-2 w-full rounded-md">
        <label for="email" class="block mb-1">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱" class="border border-gray-400 p-2 mb-2 w-full rounded-md">
        <label for="message" class="block mb-1">留言：</label>
        <textarea id="message" name="message" rows="4" placeholder="请输入留言内容" class="border border-gray-400 p-2 mb-2 w-full rounded-md"></textarea>
        <input type="submit" value="提交" class="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 w-full">
    </form>

    <!-- 语义化标签 -->
    <h2 class="text-3xl font-bold mb-3">语义化标签示例</h2>
    <header class="bg-gray-200 p-4 mb-4 rounded-md shadow-md">
        <h1 class="text-2xl font-bold">网站头部</h1>
    </header>
    <nav class="bg-gray-300 p-2 mb-4 rounded-md shadow-md">
        <ul class="flex space-x-4 justify-center">
            <li><a href="#" class="text-blue-500 hover:underline">首页</a></li>
            <li><a href="#" class="text-blue-500 hover:underline">关于我们</a></li>
            <li><a href="#" class="text-blue-500 hover:underline">联系我们</a></li>
        </ul>
    </nav>
    <main class="mb-4">
        <article class="bg-white p-4 mb-4 rounded-md shadow-md">
            <h2 class="text-2xl font-bold mb-2">文章标题</h2>
            <p>这是一篇文章的内容。文章可以包含各种信息，如新闻、技术分享等。</p>
        </article>
        <section class="bg-white p-4 mb-4 rounded-md shadow-md">
            <h2 class="text-2xl font-bold mb-2">章节标题</h2>
            <p>这是一个章节的内容。章节可以对文章进行更细致的划分。</p>
        </section>
    </main>
    <aside class="bg-gray-200 p-4 mb-4 rounded-md shadow-md">
        <h2 class="text-2xl font-bold mb-2">侧边栏</h2>
        <p>侧边栏可以显示一些额外的信息，如广告、相关链接等。</p>
    </aside>
    <footer class="bg-gray-300 p-4 rounded-md shadow-md text-center">
        <p>版权所有 &copy; 2025</p>
    </footer>
</body>
</html>
    